// 在路由跳转时候进行权限拦截
// 所以监听路由router
import router from '@/router/index.js'
import store from '@/store/index.js'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
const whiteList = ['/404', '/login'] // 定义白名单  所有不受权限控制的页面
// 路由前置守卫
// next是必须执行的钩子 to 去哪个页面  from 从哪来
// next必须执行 如果不执行 页面就死了
// next() 放行
// next(false)
// next(地址) 跳转到某个地址
router.beforeEach(async (to, from, next) => {
  NProgress.start() // 开启进度条
  // store.getters.token 好好体会下这句代码是怎么访问到user.js文件state中token的 捋一捋文件与文件之间导入关系
  if (store.getters.token) {
    // 如果有token 判断是否是要去登录页'/login'
    if (to.path === '/login') {
      // 如果是 就让他跳转到主页
      next('/')
    } else {
      // 说明有token 并且不是跳转到登录页面 则放行
      // 放行才获取用户信息，也不是每次去获取 如果用户信息已经存在 则不获取
      if (!store.getters.userId) {
        // getUserInformation方法中存在发请求的操作 所以是异步 await强制等待这个请求拿到用户信息后，在跳转页面
        const { roles } = await store.dispatch('user/getUserInformation')
        console.log(roles)
        const routes = await store.dispatch(
          'permission/filterRoutes',
          roles.menus
        )
        router.addRoutes([
          ...routes,
          { path: '*', redirect: '/404', hidden: true }
        ]) // 将得到的动态路由添加到路由表中
        next(to.path)
        console.log(routes) // 这就是该用户可以访问的动态路由模块
      } else {
        next()
      }
    }
  } else {
    // whiteList = ['/404', '/login']
    // some()方法 返回布尔值 indexOf()方法 返回目标首次出现位置的索引 没有则为-1
    if (whiteList.indexOf(to.path) > -1) {
      next() // 没有token 去登录页或者404 放行
    } else {
      next('/login') // 否则去登录
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

// 后置守卫
router.afterEach(function() {
  NProgress.done() // 关闭进度条
})
